<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reading List</title>
<link href="css/bootstrap.min.css" rel="stylesheet">


<style type="text/css">
    #mybody {
        width: 846px;

        padding: 20px;
    }
    .progress {
        margin-bottom: 0px;
        background-color: #F1F1F1;
    }
</style>
</head>

<body role="document">
<div class="container">
    <h1>阅读计划</h1>

    <p>（以下纯属虚构）</p>
    <div class="table-responsive">
        <table class="table table-hover">
        <thead>
            <tr>
                <th> 书名 </th>
                <th> 进度 </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td> <a href="http://book.douban.com/subject/1230413/" target="_blank">《深入理解计算机系统》</a> </td>
                <td>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" style="width:100%"  > 100% </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td><a href="http://book.douban.com/subject/4831448/" target="_blank">《Linux 程序设计》</a> </td>
                <td>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" style="width:33%"> 33% </div>
                    </div>
                </td>
            </tr>
            
            <tr>
                <td> <a href="http://book.douban.com/subject/10482195/" target="_blank">《编程语言实现模式》</a> </td>
                <td>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger" style="width:3%"> 3% </div>
                    </div>
                </td>
            </tr>
            
        </tbody>
        </table>

    </div>
</div>

</body>
</html>
